<template>
  <s-layout title="确认订单" :bg-style="{ backgroundColor: '#f5f5f5' }">
    <view class="confirm-order-container">
      <scroll-view scroll-y class="content-scroll">
        <!-- 门店信息 -->
        <view class="info-section">
          <view class="store-info">
            <view class="store-name">{{ store.name }}</view>
            <view class="store-address">{{ store.address }}</view>
            <view class="store-distance" v-if="store.distance">
              <uni-icons type="location" size="14" color="#999"></uni-icons>
              <text>当前门店距离你{{ store.distance }}</text>
            </view>
          </view>
        </view>

        <!-- 用餐方式 -->
        <view class="info-section">
          <view class="section-title">用餐方式</view>
          <view class="dining-options">
            <view 
              class="dining-option" 
              :class="{active: diningOption === 'pickup'}" 
              @click="diningOption = 'pickup'"
            >
              <view class="option-radio" :class="{checked: diningOption === 'pickup'}"></view>
              <text>打包带走</text>
            </view>
            <view 
              class="dining-option" 
              :class="{active: diningOption === 'dine-in'}" 
              @click="diningOption = 'dine-in'"
            >
              <view class="option-radio" :class="{checked: diningOption === 'dine-in'}"></view>
              <text>店内用餐</text>
            </view>
          </view>
        </view>

        <!-- 联系电话 -->
        <view class="info-section">
          <view class="section-title">
            <uni-icons type="phone" size="16" color="#e4393c"></uni-icons>
            <text>联系电话</text>
          </view>
          <view class="phone-row">
            <input 
              v-model="phone" 
              class="phone-input" 
              type="number" 
              maxlength="11"
              :placeholder="phone"
            />
          </view>
          <view class="phone-tip">必填，用于接收订单进度，请正确填写</view>
        </view>

        <!-- 商品明细 -->
        <view class="card order-detail-card">
          <view class="card-header">
            <uni-icons type="list" size="18" color="#c7000b"></uni-icons>
            <text class="card-title">商品信息</text>
          </view>
          <view class="product-list">
            <view class="product-item" v-for="item in cart" :key="item.uniqueId">
              <image :src="item.image" class="product-image" mode="aspectFill" />
              <view class="product-info">
                <view class="product-name">{{ item.name }}</view>
                <view class="product-specs" v-if="item.specsText">{{ item.specsText }}</view>
                <view class="product-bottom">
                  <text class="product-price">¥{{ item.price.toFixed(2) }}</text>
                  <text class="product-quantity">x{{ item.quantity }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 占位，防止被底部遮挡 -->
        <view style="height: 180rpx;"></view>
      </scroll-view>

      <!-- 底部提交栏 -->
      <view class="bottom-bar">
        <view class="total-info">
          <view class="total-count">共{{ cartCount }}件</view>
          <view class="total-price">
            <text class="price-label">合计：</text>
            <text class="price-value">¥{{ Number(cartTotal || 0).toFixed(2) }}</text>
          </view>
        </view>
        <button class="submit-btn" @click="showConfirmPopup">去付款</button>
      </view>
      
      <!-- 确认门店弹窗 -->
      <view class="confirm-popup" v-if="isConfirmPopupVisible" @click.self="isConfirmPopupVisible = false">
        <view class="popup-content">
          <view class="popup-title">确认订单信息</view>
          <view class="popup-store-name">{{ store.name }}</view>
          <view class="popup-store-address">{{ store.address }}</view>
          <view class="popup-distance" v-if="store.distance">距您{{ store.distance }}</view>
          <view class="popup-divider"></view>
          <view class="popup-info">
            <text class="info-label">用餐方式：</text>
            <text class="info-value">{{ diningOption === 'pickup' ? '打包带走' : '店内用餐' }}</text>
          </view>
          <view class="popup-info">
            <text class="info-label">联系电话：</text>
            <text class="info-value">{{ phone }}</text>
          </view>
          <view class="popup-info">
            <text class="info-label">订单金额：</text>
            <text class="info-value highlight">¥{{ Number(cartTotal || 0).toFixed(2) }}</text>
          </view>
          <view class="popup-actions">
            <button class="popup-btn cancel" @click="isConfirmPopupVisible = false">取消</button>
            <button class="popup-btn confirm" @click="submitOrder">确认提交</button>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import sheep from '@/sheep';
import { BRAND_TYPES, getBrandName } from '@/config/catering-brands';

const cateringStore = sheep.$store('catering');
const userStore = sheep.$store('user');

const store = computed(() => cateringStore.storeInfo);
const cart = computed(() => cateringStore.cart);
const cartCount = computed(() => cateringStore.cartCount);
const cartTotal = computed(() => cateringStore.cartTotal);

const diningOption = ref('pickup');
const isConfirmPopupVisible = ref(false);
const phone = ref('');

onMounted(() => {
    // 初始化手机号
    phone.value = userStore.userInfo?.mobile || '';
    
    // 检查购物车是否为空
    if (cartCount.value === 0) {
        uni.showToast({
            title: '购物车为空',
            icon: 'none'
        });
        setTimeout(() => {
            uni.navigateBack();
        }, 1500);
    }
    
    console.log('确认订单页面初始化:', {
        store: store.value,
        cart: cart.value,
        cartCount: cartCount.value,
        cartTotal: cartTotal.value
    });
});

// 验证手机号
function validatePhone(phoneNumber) {
    const phoneReg = /^1[3-9]\d{9}$/;
    return phoneReg.test(phoneNumber);
}

// 显示确认弹窗
function showConfirmPopup() {
    // 验证手机号
    if (!phone.value) {
        uni.showToast({
            title: '请填写联系电话',
            icon: 'none'
        });
        return;
    }
    
    if (!validatePhone(phone.value)) {
        uni.showToast({
            title: '请填写正确的手机号',
            icon: 'none'
        });
        return;
    }
    
    // 验证门店信息
    if (!store.value || !store.value.id) {
        uni.showToast({
            title: '门店信息不完整',
            icon: 'none'
        });
        return;
    }
    
    // 验证购物车
    if (cartCount.value === 0) {
        uni.showToast({
            title: '购物车为空',
            icon: 'none'
        });
        return;
    }
    
    isConfirmPopupVisible.value = true;
}

/**
 * 根据不同品牌构造商品数据
 * @param {Object} item - 购物车商品对象
 * @param {Number} brandOt - 品牌类型编号
 * @returns {Object} 符合对应品牌API要求的商品数据
 */
function buildProductData(item, brandOt) {
    const isCombo = item.selectedSpecs && Object.keys(item.selectedSpecs).length > 0;
    
    // K记（肯德基）- ot: 1
    // 特点：
    // - 大部分商品为单品，无规格，selected为空数组
    // - 部分套餐商品有规格，使用 spec_sets 结构
    // - 规格: linkId是规格组ID（spec.id），productId是选项ID（option.id）
    if (brandOt === BRAND_TYPES.KFC) {
        const productData = {
            productId: String(item.id),
            linkId: '',
            quantity: item.quantity,
            nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            menuFlag: isCombo ? 'C' : 'P',  // C:套餐, P:单品
            sellPrice: item.price,  // ✅ 建议销售价（第三方API要求，对应priceHead）
            oPrice: item.originalPrice || item.price,  // ✅ 市场价（第三方API要求，对应price）
            priceHead: item.price,  // 后端内部字段（保留兼容）
            price: item.originalPrice || item.price,  // 后端内部字段（保留兼容）
            selected: []
        };
        
        // ✅ 如果有规格选择，构建 selected 数组
        if (isCombo) {
            const subProducts = Object.entries(item.selectedSpecs).map(([key, value]) => {
                // 肯德基 spec_sets：linkId是规格组ID，productId是选项ID
                return {
                    linkId: value.linkId || value.specId || '',  // ✅ 规格组ID（spec.id）
                    productId: String(value.id),  // ✅ 选项ID（option.id）
                    quantity: 1,
                    selAmount: value.price || 0  // ✅ 规格选项的额外费用
                };
            });
            
            productData.selected = [{
                round: 0,
                products: subProducts
            }];
            
            console.log('【KFC】构建规格数据:', JSON.stringify(productData.selected, null, 2));
        }
        
        return productData;
    }
    
    // 麦记（麦当劳）- ot: 2
    // 特点：套餐模式，selected中linkId是规格组id（optional[].id）
    if (brandOt === BRAND_TYPES.MCDONALD) {
        const productData = {
            productId: String(item.id),
            linkId: '',
            quantity: item.quantity,
            nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            sellPrice: item.price,  // ✅ 建议销售价（第三方API要求）
            oPrice: item.originalPrice || item.price,  // ✅ 市场价（第三方API要求）
            selPrice: item.price,  // 后端内部字段（保留兼容）
        };
        
        if (isCombo) {
            const subProducts = Object.entries(item.selectedSpecs).map(([key, value]) => ({
                linkId: String(value.linkId || value.specId || ''),  // ✅ 麦当劳：使用规格组id（optional[].id）
                productId: String(value.id || value),  // ✅ 选项商品id（sku_infos[].id）
                quantity: 1,
                selAmount: value.price || 0  // ✅ 规格选项的额外费用
            }));
            
            productData.selected = [{
                round: 0,
                products: subProducts
            }];
            
            console.log('【麦当劳】订单商品数据:', JSON.stringify(productData, null, 2));
        } else {
            productData.selected = [{ round: 0, products: [] }];
        }
        
        return productData;
    }
    
    // 星爸爸（星巴克）- ot: 4
    // 特点：套餐模式，oPrice为0，规格顺序要求（杯型第一，温度第二）
    if (brandOt === BRAND_TYPES.STARBUCKS) {
        const productData = {
            productId: String(item.id),
            linkId: '',
            quantity: item.quantity,
            nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            sellPrice: item.price,  // ✅ 建议销售价（第三方API要求）
            oPrice: 0,  // 星巴克oPrice为0
            selPrice: item.price,  // 后端内部字段（保留兼容）
        };
        
        if (isCombo) {
            // 星巴克要求顺序：杯型（Cupsize）第一个，温度（Temperature）第二个
            const subProducts = Object.entries(item.selectedSpecs)
                .sort(([keyA, valueA], [keyB, valueB]) => {
                    // 使用规格组名称（specName）排序：杯型 > 温度 > 其他
                    const specNameA = valueA.specName || keyA || '';
                    const specNameB = valueB.specName || keyB || '';
                    if (specNameA.includes('杯')) return -1;
                    if (specNameB.includes('杯')) return 1;
                    if (specNameA.includes('温')) return -1;
                    if (specNameB.includes('温')) return 1;
                    return 0;
                })
                .map(([key, value]) => ({
                    linkId: String(value.linkId || value.specId || ''),  // ✅ 规格组ID（必须）
                    productId: String(value.id || ''),  // ✅ 选项ID（必须）
                    quantity: 1,
                    selAmount: value.price || 0  // ✅ 规格选项的额外费用（如：大杯+6元）
                }));
            
            console.log('【星巴克】订单商品规格数据:', JSON.stringify({
                itemName: item.name,
                selectedSpecs: item.selectedSpecs,
                subProducts: subProducts
            }, null, 2));
            
            productData.selected = [{
                round: 0,
                products: subProducts
            }];
        } else {
            productData.selected = [{ round: 0, products: [] }];
        }
        
        return productData;
    }
    
    // 喜茶 - ot: 32
    // 特点：套餐模式，linkId是规格组ID，productId是选项ID，必须都传
    if (brandOt === BRAND_TYPES.HEYTEA) {
        const productData = {
            productId: String(item.id),
            linkId: '',
            quantity: item.quantity,
            nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            sellPrice: item.price,  // ✅ 建议销售价（第三方API要求）
            oPrice: item.originalPrice || item.price,  // ✅ 市场价（第三方API要求）
            selPrice: item.price,  // 后端内部字段（保留兼容）
        };
        
        if (isCombo) {
            const subProducts = Object.entries(item.selectedSpecs).map(([key, value]) => {
                // 喜茶：linkId是规格组ID，productId是选项ID
                return {
                    linkId: value.linkId || key,  // ✅ 规格组ID（spec.id）
                    productId: String(value.id),  // ✅ 选项ID（value.id）
                    quantity: 1,
                    selAmount: value.price || 0  // ✅ 规格选项的额外费用
                };
            });
            
            productData.selected = [{
                round: 0,
                products: subProducts
            }];
            
            console.log('【喜茶】订单商品数据:', JSON.stringify(productData, null, 2));
        } else {
            productData.selected = [];
        }
        
        return productData;
    }
    
    // 瑞幸 - ot: 16
    // 特点：SKU模式，不需要linkId，selected.products[0].productId是SKU code
    if (brandOt === BRAND_TYPES.LUCKIN) {
        if (!item.skuId) {
            console.error('❌【瑞幸】订单创建失败：缺少 skuId');
            console.error('商品信息:', JSON.stringify(item, null, 2));
            uni.showToast({ 
                title: '商品SKU信息缺失，请重新选择规格', 
                icon: 'none',
                duration: 3000
            });
        }
        
        const productData = {
            productId: String(item.id),
            linkId: '',  // ✅ 瑞幸不需要linkId
            quantity: item.quantity,
            nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            sellPrice: item.price,  // ✅ 建议销售价（第三方API要求）
            oPrice: item.originalPrice || item.price,  // ✅ 市场价（第三方API要求）
            selPrice: item.price,  // 后端内部字段（保留兼容）
            selected: [{
                round: 0,
                products: [{
                    productId: item.skuId || '',  // ✅ SKU code
                    quantity: 1,
                    selAmount: 0  // ✅ 瑞幸使用SKU模式，价格已包含在基础价中
                }]
            }]
        };
        
        console.log('【瑞幸】订单商品数据:', JSON.stringify(productData, null, 2));
        return productData;
    }
    
    // 酷迪（库迪）- ot: 64
    // 特点：SKU模式，linkId是套餐选项skuID，selected.products[0].productId与linkId相同
    if (brandOt === 64) { // CUDI
        if (!item.skuId) {
            console.error('【库迪】缺少 skuId:', item);
        }
        
        return {
            productId: String(item.id),
            linkId: item.skuId || '', // 套餐选项skuID（必须）
            quantity: item.quantity,
            nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            selPrice: item.price,  // ✅ 套餐建议售价（后端字段）
            oPrice: item.originalPrice || item.price,  // ✅ 市场价格（后端字段）
            selected: [{
                round: 0,
                products: [{
                    productId: item.skuId || '', // 跟外层linkId相同
                    quantity: 1,
                    selAmount: 0  // ✅ 库迪使用SKU模式，价格已包含在基础价中
                }]
            }]
        };
    }
    
    // 霸王茶姬 - ot: 128
    // 特点：linkId是杯型SKU ID，selected.products是做法选择（温度、甜度等）
    if (brandOt === BRAND_TYPES.CHAWANG) {
        if (!item.cupSkuId) {
            console.error('❌【霸王茶姬】订单创建失败：缺少 cupSkuId（杯型SKU）');
            console.error('商品信息:', JSON.stringify(item, null, 2));
            uni.showToast({ 
                title: '商品规格信息缺失，请重新选择规格', 
                icon: 'none',
                duration: 3000
            });
        }
        
        // ✅ 为做法选择添加selAmount字段
        const practicesWithPrice = (item.selectedPractices || []).map(practice => ({
            ...practice,
            selAmount: practice.selAmount || 0  // 做法选择的额外费用
        }));
        
        const productData = {
            productId: String(item.id),  // 主商品ID
            linkId: item.cupSkuId || '',  // ✅ 杯型SKU ID（goodsSkuList中的skuId）
            quantity: item.quantity || 1,
            nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            sellPrice: item.price,  // ✅ 建议销售价（salePrice）
            oPrice: item.originalPrice || item.price,  // ✅ 市场价（orgPrice）
            config: item.specsText || '',  // 规格描述（如："大杯/热/不另外加糖"）
            selected: [{
                round: 0,
                products: practicesWithPrice  // ✅ 做法选择（温度、甜度等）
            }]
        };
        
        console.log('【霸王茶姬】订单商品数据:', JSON.stringify(productData, null, 2));
        return productData;
    }
    
    // 奈雪的茶 - ot: 8
    // 特点：SKU模式，selected中productId是完整的SKU ID
    if (brandOt === BRAND_TYPES.NAIXUE) {
        if (!item.skuId) {
            console.error('【奈雪】缺少 skuId，请确保用户选择了规格:', item);
            }
            
            return {
            linkId: '',
            productId: String(item.id),  // 主产品id
            quantity: item.quantity,
                nameCn: item.name,
            imageUrl: item.image || item.pic || '',
            sellPrice: item.skuPrice || item.price,  // ✅ SKU建议售价（salePrice）
            oPrice: String(item.originalPrice || item.price),  // ✅ SKU原价（price）
            selected: [{
                round: 0,
                products: [{
                    linkId: '',
                    productId: item.skuId || '',  // ✅ 套餐选项skuID（必须）
                    quantity: 1,
                    selAmount: 0  // ✅ 奈雪使用SKU模式，价格已包含在基础价中
                }]
            }]
        };
    }
    
    // 其他品牌通用处理
    const productData = {
        productId: String(item.id),
        linkId: item.linkId || '',
                quantity: item.quantity,
        nameCn: item.name,
        imageUrl: item.image || item.pic || '',
        selPrice: item.price,
        oPrice: item.originalPrice || item.price,
    };
    
    if (isCombo) {
        const subProducts = Object.entries(item.selectedSpecs).map(([key, value]) => {
            const subProduct = {
                productId: String(value.id || value.skuId || value),
                quantity: value.quantity || 1,
                selAmount: value.price || 0  // ✅ 规格选项的额外费用
            };
            
            if (value.linkId) {
                subProduct.linkId = value.linkId;
            }
            
            return subProduct;
        });
        
        productData.selected = [{
            round: 0,
            products: subProducts
        }];
    } else {
        productData.selected = [];
    }
    
    return productData;
}

/**
 * 提交订单
 * 根据不同品牌适配订单数据结构，调用创建订单API
 */
async function submitOrder() {
    isConfirmPopupVisible.value = false;
    
    // ✅ 根据购物车商品的品牌类型构建订单
    // 注意：每个商品可能来自不同品牌，需要单独处理
    const products = cart.value.map(item => {
        const itemBrandOt = item.brandOt || store.value.ot || BRAND_TYPES.KFC;
        return buildProductData(item, itemBrandOt);
    });
    
    // 获取主品牌类型（用于订单级别字段）
    const mainBrandOt = cart.value[0]?.brandOt || store.value.ot || BRAND_TYPES.KFC;
    const brandName = getBrandName(mainBrandOt);
    
    console.log('当前品牌:', brandName, 'ot:', mainBrandOt);
    console.log('购物车商品品牌:', cart.value.map(item => ({
        name: item.name,
        brandOt: item.brandOt || '未设置'
    })));
    
    // 构造订单数据，根据不同品牌适配
    const orderPayload = {
        shopName: store.value.storeName || store.value.name,
        address: store.value.address || '',
        cityId: store.value.cityId || '',
        cityCode: store.value.cityCode || '',
        shopId: store.value.shopId || store.value.id,
        shopCode: store.value.shopCode || '',
        eatType: diningOption.value === 'pickup' ? 1 : 0, // 0:堂食 1:打包 2:外卖
        phone: phone.value,
        remark: '',
        orderSn: '',
        brandType: mainBrandOt, // 品牌类型
        products: products,
        giftAmount: 0,
    };
    
    console.log('【确认订单】门店信息:', {
        shopId: orderPayload.shopId,
        shopName: orderPayload.shopName,
        brandType: orderPayload.brandType,
        brandName: brandName
    });
    console.log('提交订单数据:', JSON.stringify(orderPayload, null, 2));
    
    uni.showLoading({ title: '正在提交...' });
    
    try {
        const res = await sheep.$api.catering.createOrder(orderPayload);
        
        uni.hideLoading();

        console.log('订单创建响应:', res);

        if (res.code === 200) {
            // 清空购物车
            cateringStore.clearCart();
            
            uni.showToast({ 
                title: '订单创建成功', 
                icon: 'success',
                duration: 1500
            });
            
            // 跳转到待支付页面
            setTimeout(() => {
                sheep.$router.redirect('/pages/catering/order-pay', { 
                    orderId: res.data.systemOrderId 
                });
            }, 1500);
        } else {
            uni.showToast({ 
                title: res.msg || '订单创建失败', 
                icon: 'none',
                duration: 2000
            });
        }
    } catch (error) {
        uni.hideLoading();
        console.error('订单提交失败:', error);
        uni.showToast({ 
            title: error.message || '订单提交失败，请重试', 
            icon: 'none',
            duration: 2000
        });
    }
}
</script>

<style lang="scss" scoped>
.confirm-order-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.content-scroll {
  flex: 1;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .store-info {
    .store-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 16rpx;
    }
    
    .store-address {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 12rpx;
    }
    
    .store-distance {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;
      margin-top: 12rpx;
      
      text {
        margin-left: 6rpx;
      }
    }
  }
  
  .section-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
  }
  
  .dining-options {
    display: flex;
    gap: 20rpx;
    
    .dining-option {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12rpx;
      font-size: 28rpx;
      color: #333;
      padding: 0;
      
      .option-radio {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 2rpx solid #ddd;
        position: relative;
        
        &.checked {
          border-color: #e4393c;
          
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background: #e4393c;
          }
        }
      }
    }
  }
  
  .phone-row {
    margin-bottom: 12rpx;
    
    .phone-input {
      width: 100%;
      font-size: 32rpx;
      color: #333;
      padding: 0;
      border: none;
      background: transparent;
      
      &::placeholder {
        color: #333;
      }
    }
  }
  
  .phone-tip {
    font-size: 24rpx;
    color: #e4393c;
    line-height: 1.6;
  }
}

.card {
  background-color: #fff;
  border-radius: 0;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: none;
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    padding-bottom: 0;
    border-bottom: none;
    
    .card-title {
      margin-left: 10rpx;
      font-size: 28rpx;
      font-weight: normal;
      color: #333;
    }
  }
}

.order-detail-card {
  .product-list {
    max-height: 500rpx;
    overflow-y: auto;
    
    .product-item {
      display: flex;
      align-items: flex-start;
      padding: 20rpx 0;
      
      &:not(:last-child) {
        border-bottom: 1rpx solid #f5f5f5;
      }
      
      .product-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
        background-color: #f5f5f5;
      }
      
      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 120rpx;
        
        .product-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          line-height: 1.4;
          margin-bottom: 8rpx;
        }
        
        .product-specs {
          font-size: 24rpx;
          color: #999;
          line-height: 1.4;
          margin-bottom: 12rpx;
        }
        
        .product-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .product-price {
            font-size: 30rpx;
            color: #c7000b;
            font-weight: bold;
          }
          
          .product-quantity {
            font-size: 26rpx;
            color: #666;
          }
        }
      }
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.04);
  
  .total-info {
    flex: 1;
    
    .total-count {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 4rpx;
    }
    
    .total-price {
      display: flex;
      align-items: baseline;
      
      .price-label {
        font-size: 26rpx;
        color: #333;
      }
      
      .price-value {
        color: #c7000b;
        font-size: 40rpx;
        font-weight: bold;
        margin-left: 8rpx;
      }
    }
  }
  
  .submit-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #c7000b 100%);
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 40rpx;
    padding: 24rpx 60rpx;
    line-height: 1;
    box-shadow: 0 4rpx 12rpx rgba(199, 0, 11, 0.3);
  }
}

.confirm-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  
  .popup-content {
    background-color: #fff;
    width: 640rpx;
    border-radius: 24rpx;
    padding: 48rpx;
    margin: 0 40rpx;
    
    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 32rpx;
    }
    
    .popup-store-name {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      text-align: center;
      margin-bottom: 12rpx;
    }
    
    .popup-store-address {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      line-height: 1.6;
      margin-bottom: 8rpx;
    }
    
    .popup-distance {
      font-size: 24rpx;
      color: #666;
      text-align: center;
      margin-bottom: 24rpx;
    }
    
    .popup-divider {
      height: 1rpx;
      background-color: #f0f0f0;
      margin: 24rpx 0;
    }
    
    .popup-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      font-size: 28rpx;
      
      .info-label {
        color: #666;
      }
      
      .info-value {
        color: #333;
        font-weight: 500;
        
        &.highlight {
          color: #c7000b;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
    
    .popup-actions {
      display: flex;
      gap: 24rpx;
      margin-top: 40rpx;
      
      .popup-btn {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        font-size: 30rpx;
        font-weight: 500;
        
        &.cancel {
          background: #f5f5f5;
          color: #666;
        }
        
        &.confirm {
          background: linear-gradient(135deg, #ff6b6b 0%, #c7000b 100%);
          color: #fff;
          box-shadow: 0 4rpx 12rpx rgba(199, 0, 11, 0.3);
        }
      }
    }
  }
}
</style>
